<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>列表</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<script src="js/vue-2.4.0.js" type="text/javascript"></script>
	<script src="js/axios_v0.12.0.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box flex-col">
		<div class="centerflex">
			<i class="fdj iconfont icon-sousuo"></i>
			<input type="text" name="" id="" value="" class="sch-txt" placeholder="输入您要搜索的商品" />
		</div>
	</div>
	<a class="btn" href="#">
		<i class="iconfont icon-gouwuche"></i>
		<span>2</span>
	</a>
</header>
<!--header end-->

<div class="warp clearfloat" id="app">
	<div class="lists clearfloat">
		<div class="top clearfloat">
			<ul>
				<li @click="defaultSort">默认</li>
				<li>价格<i class="iconfont icon-xiala" ref="input" @click="upSortByPrice"></i></li>
				<li>销量<i class="iconfont icon-xiala" @click="downSortByPrice"></i></li>
			</ul>
		</div>
		<!--		<div class="bottom clearfloat" v-for="lineData in lineDatas" id="bottomclearfloat">-->
<!--		<div class="bottom clearfloat" id="bottomclearfloat">-->
		<div class="bottom clearfloat" >
			<div class="lie clearfloat" v-for="prod in products">
				<a :href=" 'detail.html?id='+(prod.id)">
					<div class="tu clearfloat fl">
						<!--						<img :src="'..'+(prod.image)+'collect.png'" class="img-responsive" />-->
						<img :src="'.'+(prod.image)+'collect.png'" class="img-responsive" />
					</div>
				</a>
				<div class="right clearfloat fl">
					<a :href=" 'detail.html?id='+(prod.id)">
						<p class="tit">{{prod.title}}</p>
					</a>
					<div class="xia clearfloat">
						<a :href=" 'detail.html?id='+(prod.id)">
							<p class="jifen fl over">¥{{prod.price}}</p>
						</a>
						<span class="fr db"></span>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
	<ul>
		<li>
			<a href="index.html">
				<i class="iconfont icon-shouye"></i>
				<p>首页</p>
			</a>
		</li>
		<li class="active">
			<a href="cation.html">
				<i class="iconfont icon-icon04"></i>
				<p>分类</p>
			</a>
		</li>
		<li>
			<a href="shopcar.html">
				<i class="iconfont icon-gouwuche"></i>
				<p>购物车</p>
			</a>
		</li>
		<li>
			<a href="login.html">
				<i class="iconfont icon-yonghuming"></i>
				<p>我的</p>
			</a>
		</li>
	</ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js" ></script>
<script src="slick/slick.js" type="text/javascript" ></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">

	var queryByTypeUrl="../products/findProductByCid?cid=[cid]&currentPage=[currentPage]&pageSize=[pageSize]";
	var queryByNameUrl="../products/findProductByName?name=[name]&currentPage=[currentPage]&pageSize=[pageSize]";

	var pageSize=12;
	var cid=163;
	var currentPage=1;
	var map=getPathParams();
	var defaultProducts;
	// var map = new Map([['currentPage', currentPage],['typeid', cid]]);

	Vue.prototype.$axios=axios;
	var vm = new Vue({
		// el: '#bottomclearfloat',
		el: '#app',
		data: {
			products: []
		},
		methods: {
			getProductsByCid(){
				this.$axios({
					//发送请求的方式
					method:'get',
					//请求的地址
					url:'../products/listHot'
				}).then(function (response) {
					console.log("Vue response");

					console.log(response);
					if(response.data.state == 1000){
						vm.products = response.data.data;
						console.log(response.data);
					}
				})
			},
			//价格降序
			upSortByPrice(){
				this.products = this.products.sort(function (a, b) {
					return b.price - a.price;
				});
				// this.$refs.input.$nextTick(this.downSortByPrice());
			},
			//价格升序
			downSortByPrice(){
				this.products = this.products.sort(function (a, b) {
					return a.price - b.price;
				});
				//this.$refs.input.$nextTick(this.upSortByPrice());
			},
			defaultSort(){
				// this.products = JSON.parse(JSON.stringify(defaultProducts));
			}
		},
		mounted:function () {   //自动触发写入的函数
			this.getProductsByCid();
		}
	});


	$(function(){
		if(map.get("currentPage")!=undefined){
			currentPage=map.get("currentPage");
		}

		if(map.get("typeid")!=undefined){
			cid=map.get("typeid");
			queryByType();
		}else if(map.get("name")!=undefined){
			queryByName();
		}

	});


	// 获取地址栏中所有参数构成的Map集合
	function getPathParams(){
		var map=new Map();
		// 获取地址栏中的id参数
		var path=window.location.href;
		var index=path.lastIndexOf("?");
		if(index!=-1){
			var params=path.substring(index+1);
			var array=params.split("&");
			if(array.length>0){
				for(var index in array){
					var arr=array[index].split("=");
					// 将一组参数存入map集合
					map.set(arr[0],arr[1]);
				}
			}
		}
		return map;
	}

	function switchCids(n){
		switch (n) {
			case 161:
				return 163;break;
			case 249:
				return 238;break;
			default:
				return 163;
		}
	}
</script>
</html>
